<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型</title>
    <style>
        span{
            width: 200px;
            height: 30px;
            border: 1px solid #108881;
            display: inline-block;
        }
    </style>
</head>
<body>
    <!-- 
        margin：外边距
        padding：内边距
        border：边框
        border：粗细 样式 颜色

        外边距----妙用：居中
        margin:0 0 0 0/*分别表示上、右、下、左；从上开始顺时针*/
        /*例1：居中*/
        margin:0 auto /*auto表示左右自动*/
        /*例2：*/
        margin:4px/*表示上、右、下、左都为4px*/
        /*例3*/
        margin:10px 20px 30px/*表示上为10px，左右为20px，下为30px*/
 
                盒子的计算方式：
        margin+border+padding+内容的大小

     -->

     <!-- 
         浮动

        使用浮动可以把行内元素变为块内元素
        块级元素：独占一行 h1~h6 、p、div、 列表…
        行内元素：不独占一行 span、a、img、strong
        行内元素可以包含在块级元素中，反之则不可以
      -->

      <!-- 
        (1)display
        这也是一种实现行内元素排列的方式，但是我们很多情况用float
        行内元素只占一行，改变height和width不起作用，可以在span标签里加display: inline-block;
       
        block：块元素
        inline：行内元素
        inline-block：是块元素，但是可以内联，在一行
        -->
        <span>hahah</span>
</body>
</html>